<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>气象交通大数据平台</title>
    <link rel="stylesheet" href="//minedata.cn/minemapapi/v1.3/minemap.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body,
        #map {
            width: 100%;
            height: 100%;
        }

        .popup {
            width: 400px;
            height: 200px;
            background-color: #152536;
            border: 1px solid #0A899A;
            border-radius: 6px;
        }
    </style>
</head>

<body>
    <div id="map">
    </div>
    <script src="//minedata.cn/minemapapi/v1.3/minemap.js"></script>
    <script src="//unpkg.com/echarts@3.7.2/dist/echarts.min.js"></script>

    <script>
        minemap.domainUrl = '//minedata.cn';
        minemap.spriteUrl = '//minedata.cn/minemapapi/v1.3/sprite/sprite';
        minemap.serviceUrl = '//minedata.cn/service';
        // minemap.accessToken = '2954ebbe7a1743eaad3d99d4855a2fb7';
        // minemap.solution = 3298;

        minemap.accessToken = 'a3622f2702c34957a160242d2eb0e508';
        minemap.solution = 3756;

        var map = new minemap.Map({
            container: 'map',
            style: "//minedata.cn/service/solu/style/id/3756",
            center: [121.476, 31.217],
            zoom: 12,
            pitch: 0
        });
        map.repaint = true;

        let pid = -1;

        var pupupDom = document.createElement('div');
        pupupDom.className = 'popup'
        var popup = new minemap.Popup({
                offset: [0, -5]
            })
            .setDOMContent(pupupDom).addTo(map);

        var echarts = echarts.init(pupupDom);
        var option = {
            xAxis: {
                boundaryGap: false,
                data: [0, 3, 6, 9, 12, 15, 18, 21, 24, 27, 30, 33, 36, 39, 42, 45, 48]
            },
            yAxis: {},
            series: [{
                type: 'line',
                data: [220, 182, 191, 234, 290, 330, 310]
            }]
        };
        echarts.setOption(option);

        var seq = 459;

        function find(num) {
            var id = map.style._order[num];
            map.setLayoutProperty(id, 'visibility', 'none');
            console.log(num, id);
        }

        function unfind(num) {
            var id = map.style._order[num];
            map.setLayoutProperty(id, 'visibility', 'visible');
            console.log(num, id);
        }

        // map.on('load', function () {

        //     map.addSource("weather", {
        //         "type": "vector",
        //         'tiles': ['http://203.81.245.38:48082/weather/roadweather/{z}/{x}/{y}']
        //     });

        //     map.addLayer({
        //         "id": "pre",
        //         "type": "line",
        //         "source": "weather",
        //         "source-layer": "RoadWeather",
        //         "layout": {
        //             "line-join": "round",
        //             "line-cap": "round"
        //         },
        //         "paint": {
        //             "line-color": {
        //                 "property": "PRE",
        //                 "stops": [
        //                     [0, '#28AD86'],
        //                     [10, '#7AA56D'],
        //                     [25, '#FF7839'],
        //                     [50, '#FE4B3C'],
        //                 ]
        //             },
        //             "line-width": 6
        //         }
        //     }, 'b519feeafff3466091df41876924bf21');

        //     map.addLayer({
        //         "id": "road-highlight",
        //         "type": "line",
        //         "source": "weather",
        //         "source-layer": "RoadWeather",
        //         "layout": {
        //             "line-join": "round",
        //             "line-cap": "round"
        //         },
        //         "paint": {
        //             "line-color": "#00ff00",
        //             "line-width": 6
        //         },
        //         "filter": ["==", "pid", pid]
        //     }, 'b519feeafff3466091df41876924bf21');



        // document.getElementsByClassName('minemap-ctrl')[0].parentElement.innerHTML = '';


        // });

        //278 "b519feeafff3466091df41876924bf21"
        //277 "563da56af516487aa272c0bcc914815a"
        //459 "5a3ea454892d4824b622cdabb48950a2"

        map.on('load', function () {
            map.on('mouseup', function (e) {
                var feature = map.queryRenderedFeatures(e.point, {
                    layers: ['b519feeafff3466091df41876924bf21',
                        '563da56af516487aa272c0bcc914815a',
                        'a459eaf51c9a4bdf85645de25a929420',
                        'd7bb38190113411486f0dc41601f926a'
                    ]
                });
                console.log(feature);
                // if (feature[0]) {
                //     var properties = feature[0].properties;
                //     pid = properties.pid;
                //     console.log(pid);
                //     map.setFilter('road-highlight', ["==", "pid", pid]);
                //     var time =
                //         option.series[0].data = [properties.precipitation0, properties.precipitation1,
                //             properties.precipitation2, properties.precipitation3, properties.precipitation4,
                //             properties.precipitation5, properties.precipitation6, properties.precipitation7,
                //             properties.precipitation8, properties.precipitation9, properties.precipitation10,
                //             properties.precipitation11, properties.precipitation12, properties.precipitation13,
                //             properties.precipitation14, properties.precipitation15, properties.precipitation16,
                //         ]
                // }
                // setTimeout(function () {
                //     popup.setLngLat(e.lngLat.toArray()).addTo(map);
                //     echarts.resize();
                //     echarts.setOption(option);
                // }, 50);
            });
        });

        // [121.3818398,31.2619972],
        // [121.5404549,31.1474732],
        // [121.677784,31.1856633],
        // [121.6076955,31.310646],
        // [121.5555591,31.3527053],
        // [121.4236635,31.3548923],
        // [121.3052706,31.3131433],
    </script>
</body>

</html>